展開運算子及 其餘運算子( 又稱 其餘參數 )
他們有共通特點，那就是「 都跟陣列有關 」
　
寫法就是 ...
沒錯，就是 「 ... 」（ 寫在文字編輯器中應該是會變色 ）
　
　

⑅　展開運算子 (spread operator）

啊到底是要展開什麼，這個東西很妙，他可以各種展開。
直接看例子：

let a = ['阿喵', 'kent', 'Ben'];
let b = ['水母', '蛋花', '湯'];

let c = [...a , ...b];
console.log(c) //['阿喵', 'kent', 'Ben', '水母', '蛋花', '湯']

WTF
居然 ... 就讓他們合體了 什麼巫術？

仔細的看一下

console.log(...a) // '阿喵', 'kent', 'Ben'
console.log(...b) // '水母', '蛋花', '湯'

原來就是 concat 啊
關於 concat 的用法這邊 ( 推銷自己文章 )
　

⑅　淺拷貝

沒有在罵髒話

大家都知道 JS 有深拷貝 跟 淺拷貝
如果陣列or 物件 他們有一樣的參考位置的話，修改其中一樣、另外一樣也會跟著被更動到。

let a = ['阿喵', 'kent', 'Ben'];
let b = a ;
b[0] = '秀柱';

console.log(a) // ['秀柱', 'kent', 'Ben']

夭壽，我不是改b 嗎？ 為什麼 a 會被改到啊？
這就是因為他們有一樣的參考位置 的關係。

在講這個 ... 會提到淺拷貝，
其實是因為 ... 可以解決這樣的問題 。

如下：

let a = ['阿喵', 'kent', 'Ben'];
let b = [...a] ;
b[0] = '秀柱';

console.log(a) // ['阿喵', 'kent', 'Ben']

... 好像真的很方便！！
　

⑅　類陣列 卻不是陣列？

JS 有很多 看起來跟陣列就是99.9987% 像但卻不能用陣列操作法的東東
稱他們為 類陣列

像是這種：

<!-- HTML -->
<li class='item'> 123 </li>
<li class='item cat'> 123 </li>
<li class='item'> 123 </li>

const item = document.querySelectorAll('.item')
console.log(item)
	// NodeList(3) [li.item, li.item.cat, li.item]

const item1 = item.filter( i => 
  i.classList.contains('cat'))
	// Uncaught TypeError: list_a.filter is not a function 

這種NodeList 就是類陣列。

使用展開運算子 居然能讓他變成 陣列

const item = [...document.querySelectorAll('.item')]
console.log (item) 
	// [li.item, li.item.cat, li.item]

const item1 = item.filter( i =>
  i.classList.contains('cat'))
console.log(item1)
	// [li.item.cat]

⑅　其餘運算子（rest operator）

就很字面上的意思，其餘參數。

他會放在函式的參數括號內，然後記得他必須放最後一個，否則會跳錯。

這個參數也可以用陣列操作法去操作（ forEach 、map 之類的 ）

function fn(...a){
  console.log(a)
  
  let num = a.filter(i=>i>3)
  console.log(num)
		// [4, 5, 6]
}
fn(1,2,3,4,5,6)

再來「如果有多個參數，他要放最後面」的範例：

function fn(x,y,...a){
  console.log(`參數 x 是 ${x}`)
		// 參數 x 是 1
  console.log(`參數 y 是 ${y}`)
		// 參數 y 是 2
  console.log(`參數 ...a 是 ${a}`)
		// 參數 ...a 是 3, 4, 5, 6
}
fn(1,2,3,4,5,6) 

⑅　物件 + 展開 = 這太懶了吧

如 title (
這邊直接看 code 會比較好懂：

const cat_mother = {
    mother_name: '喵仔',
    mother_age: 2,
    mother_color: 'yellow'
}
const cat_father = {
    father_name: '喵吉',
    father_age: 55,
    father_color: 'Rainbow'
}
const cat = {
    name: '阿貓',
    age: 10,
    color: 'pink',
		...cat_mother, //展開貓媽媽
		...cat_father //展開貓爸爸
}

console.log(cat)
 /* Object {
      age: 10,
      color: "pink",
      father_age: 55,
      father_color: "Rainbow",
      father_name: "喵吉",
      mother_age: 2,
      mother_color: "yellow",
      mother_name: "喵仔",
      name: "阿貓" 
}*/

　
　
ES6 真的懶 ww
以後看到 ... 就不會錯愕哩 ꉂꉂ(ᵔᗜᵔ*)

じゃあねー　♫